import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Button, List, DatePicker, InputNumber, Checkbox, TreeSelect, Tooltip } from 'antd';
import Popup_table_hooks_datas from './popup_table_hooks_datas';
import Popup_table_hooks_viewname from './popup_table_hooks_viewname';
import Popup_select from './popup_select';
import {
  QuestionCircleOutlined
} from '@ant-design/icons';
import Popup_table_hooks_mx from './popup_table_hooks_mx';
import '/src/styles/customfielditem.css';
import Upload_hooks from './upload_hooks';
import Upload_fj_hooks from './upload_fj_hooks';
import Upload_dgfj_hooks from './upload_dgfj_hook';
import moment from 'moment';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import { openNotification_util } from '../util/util';
import { transform } from 'lodash';
import Tinymce from './tinymce';

moment.locale('zh-cn');
const { TextArea } = Input;

const Customfielditem_hook = (props) => {
  const renderRightItem = () => {
    const { item, form, handlechange, dynDatasObject, changefresh } = props;
    const commonProps = {
      style: item.style ? item.style : { width: "95%" },
      value: form[item.dataIndex].value,
      disabled: item.disabled ? true : false,
      placeholder: `输入${item.title}...`
    };

    switch (item.inputType) {
      case "pdf_item":
        return (
          <Button
            type="primary"
            style={item.style ? item.style : { width: "95%", backgroundColor: "#1890ff" }}
            onClick={() => {
              form[item.dataIndex].value
                ? window.open(form[item.dataIndex].value)
                : openNotification_util("附件地址异常：" + form[item.dataIndex].value);
            }}
          >
            查看pdf
          </Button>
        );

      case "input_item":
        return (
          <Input
            {...commonProps}
            type={item.type ? item.type : "text"}
            onChange={(e) => handlechange(item.dataIndex, e.target.value, 'single')}
          />
        );

      case "input_number_item":
        return (
          <InputNumber

            controls={false}
            max="22332233223322339"
            style={item.style ? item.style : { width: "95%", padding: "0" }}
            value={form[item.dataIndex].value}
            disabled={item.disabled ? true : false}
            onChange={(e) => handlechange(item.dataIndex, e, 'single')}
            placeholder={`输入${item.title}...`}
          />
        );

      case "input_text_item":
        return (
          <TextArea
            {...commonProps}
            style={item.style ? item.style : { width: "100%" }}
            autoSize={{ minRows: 3, maxRows: 3 }}
            onChange={(e) => handlechange(item.dataIndex, e.target.value, 'single')}
            placeholder={item.placeholder ? item.placeholder : `输入${item.title}...`}
          />
        );

      case "tree_select_item":
        return (
          <TreeSelect
            treeLine={true}
            style={{ width: "95%", textAlign: "left" }}
            listHeight={500}
            showSearch
            getPopupContainer={triggerNode => triggerNode.parentNode} //解决Select弹窗位置问题
            treeData={item.selectdata}
            showLine={true}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value}
            onSelect={(e, node, extra) => {
              handlechange(item.dataIndex, node, 'single', node)
            }}
          />
        );

      case "select_item":
        return (
          <Select
            style={{ width: "95%", textAlign: "left" }}
            getPopupContainer={triggerNode => triggerNode.parentNode} //解决Select弹窗位置问题
            disabled={item.disabled ? true : false}
            className={form[item.dataIndex].value == "严重" ? 'my-select' : ''}
            showSearch
            optionFilterProp="label"
            mode={item.mode ? item.mode : 'single'}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value}
            onChange={(e, extra) => handlechange(item.dataIndex, e, 'single', extra)}
            options={item.selectdata}
          />
        );

      case "select_item_new":
        return (
          <Select
            style={{ width: "95%", textAlign: "left" }}
            getPopupContainer={triggerNode => triggerNode.parentNode} //解决Select弹窗位置问题
            disabled={item.disabled ? true : false}
            showSearch
            allowClear
            optionFilterProp="label"
            mode={item.mode ? item.mode : 'single'}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value ? form[item.dataIndex].value : undefined}//如果为undefined，解决palceholder不显示
            onChange={(e, extra) => handlechange(item.popup_tansferarr, extra, 'muti')}
            options={item.leagcy ? item.selectdata : dynDatasObject[item.datas_key]}
          />
        );

      case "checkbox_item":
        return (
          <Checkbox.Group
            style={{ width: "95%", textAlign: "left" }}
            options={item.selectdata}
            value={form[item.dataIndex].value}
            onChange={(e) => handlechange(item.dataIndex, e, 'single')}
          />
        );

      case "select_item_mutiple":
        return (
          <Select
            style={{ width: "100%", textAlign: "left" }}
            disabled={item.disabled ? true : false}
            maxTagCount={item.maxTagCount || 'responsive'}
            allowClear
            showArrow
            showSearch
            onSelect={(value, option) => {
              // 如果选择了 "全选" 选项
              if (value === 'ALL') {
                // 获取所有选项的值(除了"全选"选项)
                const allValues = dynDatasObject[item.datas_key]
                  .filter(opt => opt.value !== 'ALL')
                  .map(opt => opt.value);
                handlechange(item.dataIndex, allValues, 'single');
              }
            }}
            getPopupContainer={triggerNode => triggerNode.parentNode} //解决Select弹窗位置问题
            className={form[item.dataIndex].value == "严重" ? 'my-select' : ''}
            optionFilterProp="label"
            mode={item.mode ? item.mode : 'single'}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value}
            onChange={(e, extra) => handlechange(item.dataIndex, e, 'single', extra)}
            options={dynDatasObject[item.datas_key]}
          />
        );

      case "select_item_ld":
        return (
          <Select
            style={{ width: "95%", textAlign: "left" }}
            disabled={item.disabled ? true : false}
            className={form[item.dataIndex].value == "严重" ? 'my-select' : ''}
            showSearch
            mode={item.mode ? item.mode : 'single'}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value}
            onChange={(e, item) => handlechange(item.dataIndex, item, 'single')}
          >
            {item.selectdata.map((obj) => (
              <Select.Option key={obj.value} value={obj.value}>
                {obj.label}
              </Select.Option>
            ))}
          </Select>
        );

      case "date_item":
        return (
          <DatePicker
            style={{ width: "95%" }}
            disabled={item.disabled ? true : false}
            showTime={item.showTime ? true : false}
            locale={locale}
            placeholder={`选择${item.title}...`}
            value={form[item.dataIndex].value == null || form[item.dataIndex].value == '' ? '' : moment(form[item.dataIndex].value)}
            onChange={(e, datestring) => handlechange(item.dataIndex, datestring, 'single')}
          />
        );

      case "upload_item":
        return (
          <Upload_hooks
            handleback={(tpurl) => handlechange(item.dataIndex, tpurl, 'single')}
            title={item.title}
            initpxtpurl={form[item.dataIndex].value}
          />
        );
      case "upload_fj_item":
        return (
          <Upload_fj_hooks
            style={form[item.dataIndex].style ? form[item.dataIndex].style : {}}
            handleback={(tpurl) => handlechange(item.dataIndex, tpurl, 'single')}
            title={item.title}
            initpxtpurl={form[item.dataIndex].value}
          />
        );

        case "upload_dgfj_item":
        return (
          <Upload_dgfj_hooks
            style={form[item.dataIndex].style ? form[item.dataIndex].style : {}}
            handleback={(tpurl) => handlechange(item.dataIndex, tpurl, 'single')}
            title={item.title}
            initpxtpurl={form[item.dataIndex].value}
          />
        );

      case "view_fj_item":
        var fjlist = form[item.dataIndex].value ? form[item.dataIndex].value.split(",") : []
        return <div style={item.style ? item.style : {}}>
          {fjlist.map((item, index) => {
            return <div style={{ display: "flex", alignItems: "center" }}>
              {index + 1}.{item.split("-")[1]}<a type="link" href={`http://111.77.154.58:2233/${item}`} target="_blank">下载</a>
            </div>
          })}
        </div>

      case "popup_select_item":
        let initdata = [];
        try {
          initdata = JSON.parse(form[item.dataIndex].value);
        } catch (e) { }
        return (
          <Popup_select
            initdata={initdata}
            onOk={(data) => handlechange(item.dataIndex, data, 'single')}
          />
        );

      case "popup_item_datas":
        return (
          <Popup_table_hooks_datas
            viewname={item.popup_viewname}
            selecttype="radio"
            datas={dynDatasObject[item.datas_key]}
            tablecolnum={item.popup_column}
            popup_maintitle={item.popup_maintitle}
            ifshow="none"
            placeholder={item.placeholder}
            handlechange={(backdata) => handlechange(item.popup_tansferarr, backdata, 'muti')}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "popup_item_datas_new":
        return (
          <Popup_table_hooks_datas
            selecttype="radio"
            datas={dynDatasObject[item.datas_key]}
            tablecolnum={item.popup_column}
            popup_maintitle={item.popup_maintitle}
            ifshow="none"
            placeholder={item.placeholder}
            changefresh={item.fresh ? changefresh : false}
            handlechange={(backdata) => handlechange(item.popup_tansferarr, backdata, 'muti')}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "popup_item_datas_mx":
        return (
          <Popup_table_hooks_datas
            selecttype="radio"
            datas={dynDatasObject[item.datas_key]}
            tablecolnum={item.popup_column}
            popup_maintitle={item.popup_maintitle}
            ifshow="none"
            placeholder={item.placeholder}
            changefresh={item.fresh ? changefresh : false}
            handlechange={(backdata) => handlechange(item.popup_tansferarr, backdata, 'muti-mx')}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "popup_item_viewname":
        return (
          <Popup_table_hooks_viewname
            viewname={item.popup_viewname}
            selecttype="radio"
            tablecolnum={item.popup_column}
            popup_maintitle={item.popup_maintitle}
            ifshow="none"
            placeholder={item.placeholder}
            filterfuc={(backdata) => (item.filterfuc ? item.filterfuc(backdata) : backdata)}
            handlechange={(backdata) => handlechange(item.popup_tansferarr, backdata, 'muti')}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "popup_item_mx":
        return (
          <Popup_table_hooks_mx
            viewname={item.popup_viewname}
            viewmxname={item.popup_viewmxname}
            placeholder={item.placeholder}
            selecttype="radio"
            tablecolnum={item.popup_column}
            mxtablecolnum={item.popup_column_mx}
            popup_maintitle={item.popup_maintitle}
            popup_mxtitle={item.popup_mxtitle}
            handlechange={(rtselectrow) => {
              handlechange(
                {
                  popup_tansferarr: item.popup_tansferarr,
                  popup_tansferarr_mx: item.popup_tansferarr_mx
                },
                rtselectrow,
                'muti-mx'
              );
            }}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "popup_item_mx_free":
        return (
          <Popup_table_hooks_mx
            viewname={item.popup_viewname}
            viewmxname={item.popup_viewmxname}
            placeholder={item.placeholder}
            selecttype="radio"
            tablecolnum={item.popup_column}
            mxtablecolnum={item.popup_column_mx}
            popup_maintitle={item.popup_maintitle}
            popup_mxtitle={item.popup_mxtitle}
            handlechange={(rtselectrow) => {
              handlechange({ item }, rtselectrow, 'muti-free');
            }}
            inputvalue={form[item.dataIndex].value}
          />
        );

      case "textarea_item":
        return (
          <Tinymce
            onChange={(e) => handlechange(item.dataIndex, e, 'single')}
            initValue={form[item.dataIndex].value}
            variables={dynDatasObject[item.datas_key] ? dynDatasObject[item.datas_key] : []}
          />
        );

      case "readonly":
        return (
          <Input
            style={{ width: "95%" }}
            value={form[item.dataIndex].value}
            onChange={(e) => handlechange(item.dataIndex, e.target.value, 'single')}
            placeholder={`${item.placeholder ? item.placeholder : `输入${item.title}`}...`}
            disabled
          />
        );


      case "none":
      case "deletetool_item":
        return "";

      default:
        return "";
    }
  };

  // Main render function
  const renderMain = () => {
    const { item } = props;

    const commonStyle = {
      marginTop: "0.1rem",

      position: "relative",
      textIndent: "0.5rem",
      backgroundColor: "white",
      fontSize: "14px",
      fontWeight: "500",
      textAlign: "center",
      marginLeft: "0.1rem"
    };

    if (item.inputType === "input_text_item" || item.inputType === "popup_select_item" || item.inputType === "textarea_item") {
      return (
        <div style={{ ...commonStyle, height: "5.6rem", width: "98%", lineHeight: "1.6rem" }}>
          <div
            style={{
              width: "100%", textAlign: "left"
            }}
          >
            <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
            {item.inputType === "deletetool_item" ? "" : item.title + "："}
            {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
          </div>
          <div style={{ backgroundColor: "white", width: "96.5%" }}>
            {renderRightItem()}
          </div>
        </div>
      );
    } else if (item.oneline) {
      if (item.inputType === 'upload_fj_item' || item.inputType === 'upload_dgfj_item') {
        return (
          <div style={{ ...commonStyle, height: item.lineheight, width: "98%", lineHeight: "1.6rem" }}>
            <div
              style={{
                textAlign: "left",
                width: "100%",
                height: item.lineheight,
                lineHeight: item.lineheight,

              }}
            >
              <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
              {item.inputType === "deletetool_item" ? "" : item.title}
              {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
            </div>
            <div style={{ backgroundColor: "white", width: "95.5%", height: '100%', overflowX: 'auto' }}>
              {renderRightItem()}
            </div>
          </div>
        );
      } else if(item.inputType === "view_text_item"){
        return (
          <div style={{ ...commonStyle, height: item.lineheight, width: "94%", lineHeight: item.lineheight }}>
            <div
              style={{
                width: "100%",
                textAlign: "left",
              }}
            >
              <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
              {item.inputType === "deletetool_item" ? "" : item.title + "："}
              {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
            </div>
            <div style={{ backgroundColor: "white", width: "96.5%",left:"1%" }}>
              {renderRightItem()}
            </div>
          </div>
        );
      } else {
        return (
          <div style={{ ...commonStyle, height: item.lineheight, width: "98%", lineHeight: item.lineheight }}>
            <div
              style={{
                width: "100%",
                textAlign: "left",
              }}
            >
              <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
              {item.inputType === "deletetool_item" ? "" : item.title + "："}
              {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
            </div>
            <div style={{ backgroundColor: "white", width: "96.5%" }}>
              {renderRightItem()}
            </div>
          </div>
        );
      }
    } else if (item.customlinewidth) {
      if (item.inputType === 'upload_fj_item') {
        let width = item.customlinewidth.replace('%', '') / 100;
        return (
          <div style={{
            ...commonStyle, height: "1.8rem", width: item.customlinewidth
            , height: item.lineheight ? item.lineheight : "1.6rem", display: "flex"
          }}>
            <div
              style={{
                width: "7.3vw", height: item.lineheight, lineHeight: item.lineheight,
              }}
            >
              <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
              {item.inputType === "deletetool_item" ? "" : item.title}
              {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
            </div>
            <div style={{ backgroundColor: "white", marginLeft: "0.2vw", height: '100%', overflowY: 'auto', width: `${96 * width - 7.5}vw`, alignSelf: 'flex-start' }}>
              {renderRightItem()}
            </div>
          </div>
        );
      } else {
        return (
          <div style={{
            ...commonStyle, height: "1.8rem", width: item.customlinewidth
            , height: item.lineheight ? item.lineheight : "1.6rem"
          }}>
            <div
              style={{
                width: "100%",
                textAlign: "left",
                height: item.lineheight ? item.lineheight : "1.6rem",
                lineHeight: item.lineheight ? item.lineheight : "1.6rem",

              }}
            >
              <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
              {item.inputType === "deletetool_item" ? "" : item.title + "："}
              {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
            </div>
            <div style={{ backgroundColor: "white", width: "100%", textAlign: 'left', height: '100%', overflowY: 'auto' }}>
              {renderRightItem()}
            </div>
          </div>
        );
      }
    } else if (item.inputType === "space_item") {
      return (
        <div style={styleobj.linestyleflexitem}>
          <Input
            style={{ display: "none" }}
            disabled
            placeholder={`输入${item.title}...`}
          />
        </div>
      );
    } else if (item.inputType === "space_line") {
      return (
        <div
          style={{
            marginTop: "0.1rem", height: "0.1rem", fontSize: "12px", position: "relative", width: "95vw",
            textIndent: "0.5rem", color: "#120C94", backgroundColor: "white", fontWeight: "500", textAlign: "left"
          }}
        ></div>
      );
    } else if (item.inputType === "title_item") {
      return (
        <div
          style={{
            height: "1.2rem", position: "relative", width: "95vw",
            textIndent: "0.5rem", color: "#666666", backgroundColor: "white", lineHeight: "1.2rem",
            fontSize: "16px", fontWeight: "500", textAlign: "left", borderLeftStyle: "solid", borderWidth: "0.3rem", borderColor: "#a91f24",
            marginTop: "1rem", marginBottom: "0.5rem", letterSpacing: "0.05rem"
          }}
        >
          {item.title}
        </div>
      );
    } else if (item.inputType === "none") {
      return "";
    } else if (item.inputType === "view_item") {
      return (
        <div style={{ ...commonStyle, height: "3.6rem", width: "23%", marginRight: "1%", lineHeight: "1.6rem" }}>
          <div style={{width: "100%", top: "0", fontSize: "0.9vw", textAlign:"left"}} >
            <span style={{background:"white",fontWeight:"450",color:"#888"}}>{item.inputType === "deletetool_item" ? "" : item.title + " ⁘"}</span>
          </div>
          <div style={{...styleobj.linestyleflexitemright,textAlign:"left"}}>
            <Tooltip title={item.type == "password" ? '******' : item.value}>
              {item.type == "password" ? '******' : item.value}
            </Tooltip>
          </div>
        </div>
      );
    } else if (item.inputType === "view_tinymce_item") {
      return (
        <div style={{ ...commonStyle, height: "1.6rem", width: "98%", marginRight: "1%", lineHeight: "1.6rem" }}>
          <div
            style={{
              textAlign: "left",
              position: "relative",
              width: "100%",
              height: "100%",
              lineHeight: "1.6rem",
            }}
          >
            {item.inputType === "deletetool_item" ? "" : item.title + "："}
          </div>
          <div style={{
            backgroundColor: "white", position: "relative", width: "100%", border: "1px solid #e0e0e0",
            whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden", textAlign: "left"
          }}>
            <div style={{ height: "100%", width: "100%" }} dangerouslySetInnerHTML={{ __html: item.value }} />
          </div>
        </div>
      );
    } else if (item.inputType === "view_text_item") {
      return (
        <div style={{ ...commonStyle, width: "98%", marginRight: "1%", lineHeight: "1.6rem" }}>
          <div style={{width: "100%", top: "0", fontSize: "0.9vw", textAlign:"left"}} >
            <span style={{background:"white",fontWeight:"450",color:"#888"}}>
              {item.inputType === "deletetool_item" ? "" : item.title + " ⁘"}</span>
          </div>
          <div style={{...styleobj.linestyleflexitemright,textAlign:"left",overflowY:"auto",height:"5.6rem",}}>
            {/* <Tooltip title={ item.value}> */}
              {item.value}
            {/* </Tooltip> */}
          </div>
        </div>
      );
    } else {
      return (
        <div
          style={{
            ...commonStyle,
            height: "3.6rem",
            width: "23%",
            marginRight: "1%",
            lineHeight: "1.6rem"
          }}
        >
          <div
            style={
              item.inputType === "none" || item.inputType === "deletetool_item"
                ? styleobj.linestyleflexitemleftnone
                : styleobj.linestyleflexitemleft
            }
          >
            <a style={{ color: "red" }}>{item.bt ? '*' : ''}</a>
            <span >
              {item.inputType === "deletetool_item" ? "" : item.title + "："}
            </span>
            {item.message ? <Tooltip title={item.message}><QuestionCircleOutlined style={{ color: "red", marginLeft: "0.2rem" }} /></Tooltip> 
            : ""}
          </div>
          <div style={styleobj.linestyleflexitemright}>{renderRightItem()}</div>
        </div>
      );
    }
  };

  return renderMain();
};

export default Customfielditem_hook;

const styleobj = {
  linestyle: { 
    height: "1.8rem", 
    fontSize: "12px", 
    position: "relative", 
    width: "100%", 
    textIndent: "1rem" 
  },
  linestylesmall: { 
    height: "1.3rem", fontSize: "12px", 
    position: "relative", width: "100%", 
    textIndent: "1rem" 
  },
  linestyleflexitem: {
    marginTop: "0.1rem",
    height: "1.6rem",
    position: "relative",
    width: "23vw",
    textIndent: "0.5rem",
    marginRight: "1%",
    backgroundColor: "white",
    lineHeight: "1.6rem",
    fontSize: "14px",
    fontWeight: "500",
    textAlign: "center"
  },
  linestyleflexitemleftnone: { 
    backgroundColor: "", 
    position: "absolute", 
    width: "35%", 
    left: "0" 
  },
  linestyleflexitemleft: { 
    width: "100%", 
    top: "0", 
    fontSize: "12px", 
    textAlign: "left" 
  },
  linestyleflexitemright: { 
    backgroundColor: "white", 
    width: "100%", 
    right: "0" 
  },
  lineleft: { 
    width: "100%", 
    height: "100%", 
    position: "absolute", 
    left: "0%", 
    textAlign: "left", 
    lineHeight: "2rem", 
    fontSize: "14px", 
    fontWeight: "700" 
  }
};